<template>
	<view>
		<u-overlay :show="show" >
				<view class="warp">
					<image v-for="list in set.list" :src="list.img"
					mode="widthFix" @click="click(list.url)" style="max-width: 80%;"></image>
					  <view style="margin: 10px;" v-if="set.closeType=='bottom'">
					  	<u-icon @click="show= false" name="close-circle-fill" size="31" color="#fff"></u-icon>
					  </view>
				</view>
			</u-overlay>
	</view>
</template>

<script>
	export default {
		name:"diy-banner",
		data() {
			return {
				show:false,
				cacheName:""
			};
		},
		props:{
			set:{
				type:Object,
				default(){
					return {
						closeType:'bottom',//关闭按钮位置分别为bottom、auto、top
						autoCLoseTime:10,//自动关闭时间，单位：秒
						list:{
							default_1:{
								img:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/1.jpg",
								url:""
							},
							default_2:{
								img:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/images/img-user-bg.png",
								url:""
							}
						}
					}
				}
			}
		},created() {
			this.cacheName = this.curPageName+"_diy_banner"
			this.open();
		},methods:{
			click(e){
				this.navto(e);
			},
			open(){
				let date = new Date();
				let month = date.getMonth()+1;
				const d = Number(date.getFullYear()+""+(month<10?'0'+month:month)+
				(date.getDate()<10?'0'+date.getDate():date.getDate()))
				let self = this;
				let reDate = Number(this.moxiCache(this.cacheName));
				if(this.set.show_type=='every'||
				(this.set.show_type=='first'&&reDate==0)||
				(this.day=='day'&&d>reDate)){
					this.show = true;
					if(this.set.closeType=='auto'){
						setTimeout(()=>{
							self.show = false;
						},Number(this.set.autoCLoseTime)*1000)
					}
					this.moxiCache(this.cacheName,d)
				}
			}
		}
	}
</script>

<style>
.warp {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
</style>